<template>
  <!-- 最新音乐模块 -->
  <div class="newsongs">
    <div class="area">
      <div class="area-item"
           v-for="(item,index) in area"
           :key="index"
           @click="areaClick(index)"
           :class="{action:areaIndex==index}">
        {{item.name}}
      </div>
    </div>
    <scroll ref="scroll"
            class="new-scroll"
            :pull-up-load="true"
            @pullingUp="pullingUp">
      <div class="content">
        <div class="bofang"
             @dblclick="musicItemClicks(0)">
          <img src="~assets/img/playmusic/rebofang.svg"
               alt="">
          播放全部
        </div>
        <div class="music">
          <table>
            <tbody>
              <tr v-for="(item,index) in musiclist"
                  :key="index"
                  :class="{backColor:setBackColor(index)}"
                  @dblclick="musicItemClick(index)">
                <td>
                  <div class="bagc">
                    <img :src="item.pic"
                         alt=""
                         @load="imgLoad">
                    <div class="icon">
                      <img src="~assets/img/playmusic/bofang.svg"
                           alt />
                    </div>
                  </div>
                </td>
                <td>{{item.name}}</td>
                <td>{{item.album}}</td>
                <td>{{item.time}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </scroll>
  </div>
</template>

<script>
import Scroll from 'components/common/scroll/Scroll'
import { _getTopSongs } from 'network/discover'
import { _getSongsDetail, SongDetail } from 'network/detail'
import { tableMixin } from 'mixin/tableMixin'
import { indexMixin } from 'mixin/indexMixin'
import { debounce } from 'assets/common/tool'
export default {
  name: 'NewSongs',
  components: {
    Scroll
  },
  data () {
    return {
      areaIndex: 0,
      imgCurrent: 0,
      area: [
        { value: 0, name: "全部" },
        { value: 7, name: "华语" },
        { value: 96, name: "欧美" },
        { value: 16, name: "韩国" },
        { value: 8, name: "日本" }
      ],
      musiclist: [],
      list: [],
      page: 1
    }
  },
  mixins: [indexMixin, tableMixin],
  created () {
    this.getTopSongs()
  },
  methods: {
    areaClick (index) {
      this.areaIndex = index
      this.getTopSongs(true)
    },
    pullingUp () {
      debounce(this.getTopSongs(), 1000);
    },
    // 获取最受欢饮的音乐
    getTopSongs (clear = false) {
      if (clear) this.musiclist = []
      _getTopSongs(this.area[this.areaIndex].value).then(res => {
        console.log(res);
        this.list = res.data.data.slice(0, this.page * 30)
        // 一次遍历歌曲，将歌曲细节添加到列表musiclist中
        for (const i of this.list) {
          _getSongsDetail(i.id).then(res => {
            console.log(res);
            const song = new SongDetail(res.data.songs)
            this.musiclist.push(song)
          })
        }
        this.page++
        this.$refs.scroll.finishPullUp()
        console.log(this.musiclist);
      })
    },
    // 点击播放全部，从第一首开始播放
    musicItemClick (index) {
      console.log(index);
      this.PlayMusic(index)
    },
    musicItemClicks (index) {
      this.PlayMusic(index);
    },
    // 刷新页面
    imgLoad () {
      if (this.imgCurrent === this.musiclist.length - 1) {
        this.$refs.scroll.refresh();
      }
    }
  }
}
</script>

<style  scoped>
.newsongs {
  height: 100%;
  width: 100%;
}
.new-scroll {
  height: calc(100% - 45px);
  overflow: hidden;
}
.area {
  display: flex;
  border-bottom: 1px solid #25272b;
}
.area-item {
  padding: 10px 10px;
}
.action {
  color: #007a37;
  border-bottom: 2px solid #686a6e;
}
.bofang {
  padding: 10px 0px;
}
.bofang img {
  width: 24px;
  height: 24px;
  margin-right: 50x;
  vertical-align: -6px;
}
.music table {
  width: 100%;
}
.music thead {
  color: #c4c4c4;
  font-size: 12px;
}
.music tr {
  height: 50px;
  text-align: left;
}
.music tr:hover {
  background-color: #d3d3d3;
  color: #000;
}
.music tr td {
  border: 1px solid #c5c5c7;
  position: relative;
  padding-left: 5px;
}
.music tbody {
  font-size: 13px;
  color: #575757;
}
.music tr td:nth-child(1) {
  width: 50px;
  text-align: center;
}
.music tr td:nth-child(2) {
  width: 200px;
}
.music tr td:nth-child(2) img {
  width: 50px;
}
.music tbody tr td:nth-child(3) {
  color: #000000;
}
.music tr td .live {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.music tr td .xiazai {
  margin-left: 26px;
}
.music tr td:nth-child(6) {
  width: 180px;
}
.music tbody tr td {
  border: none;
}
.backColor {
  background: #eee;
}
.bagc {
  position: relative;
  width: 50px;
  height: 50px;
}
.bagc img {
  width: 100%;
}
.icon {
  background: rgba(00, 0, 0, 0.3);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
}
.icon:hover {
  opacity: 1;
}
.icon img {
  width: 24px !important;
  border-radius: 50%;
}
</style>
